<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getArticleById } from '@/api/md';
import { Viewer } from '@bytemd/vue-next'
// 掘金插件
import breaks from '@bytemd/plugin-breaks'
import frontmatter from '@bytemd/plugin-frontmatter'
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import highlightssr from '@bytemd/plugin-highlight-ssr'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import footnotes from '@bytemd/plugin-footnotes'
import math from '@bytemd/plugin-math'
// import zhHans from 'bytemd/lib/locales/zh_Hans.json'
import theme from "@/utils/bytemdPlugin/theme.js"
import align from "@/utils/bytemdPlugin/align.js"
import image from "@/utils/bytemdPlugin/image.js"
import highlight1 from "@/utils/bytemdPlugin/highlight.js"
import 'bytemd/dist/index.css'  // 导入编辑器样式
import 'highlight.js/styles/vs.css'
import 'juejin-markdown-themes/dist/juejin.min.css'
// import theme from "@/utils/bytemdPlugin/bytemd-plugin-theme.js"
// import { changeTheme, themeList } from "bytemd-plugin-theme"
// import * as themeMap from "juejin-markdown-themes/dist"
import 'bytemd/dist/index.css'  // 导入编辑器样式
import 'highlight.js/styles/vs.css'
import 'juejin-markdown-themes/dist/juejin.min.css'



const plugins = [
    gfm(),
    highlight(),
    highlightssr(),
    breaks(),
    frontmatter(),
    footnotes(),
    gemoji(),
    mediumZoom(),
    mermaid(),
    math(),
    theme(),
    align(),
    highlight1(),
    image()
]

const route = useRoute();
const article = ref(null);


const fetchArticle = async () => {
    try {
        const response = await getArticleById(route.params.id);
        if (response && response.data) {
            article.value = response.data;
        }
    } catch (error) {
        console.error('获取文章详情失败:', error);
    }
};

onMounted(() => {
    fetchArticle();
});
</script>

<template>
    <div class="article-detail">
        <nav-header />
        <div class="content" v-if="article">
            <div class="article-header">
                <h1 class="title">{{ article.title }}</h1>
                <div class="meta">
                    <span class="date">{{ article.create_time || '暂无日期' }}</span>
                    <span class="author">作者：{{ article.author || 'POETIZE' }}</span>
                    <span class="category">分类：{{ article.type || '默认分类' }}</span>
                </div>
            </div>
            <Viewer class="markdown-body" :value="article.content" :plugins="plugins" />
        </div>
    </div>
</template>

<style lang="less" scoped>
.article-detail {
    padding-top: 60px;
    min-height: 100vh;
    background: #f5f5f5;

    .content {
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        .article-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;

            .title {
                font-size: 2rem;
                color: #333;
                margin-bottom: 1rem;
            }

            .meta {
                color: #999;
                font-size: 0.9rem;

                span {
                    margin-right: 1rem;
                }
            }
        }

        .markdown-body {
            line-height: 1.8;
            color: #333;

            :deep(h1, h2, h3, h4, h5, h6) {
                margin: 1.5em 0 1em;
                font-weight: 600;
            }

            :deep(p) {
                margin: 1em 0;
            }

            :deep(code) {
                background: #f8f8f8;
                padding: 0.2em 0.4em;
                border-radius: 3px;
                font-size: 0.9em;
            }

            :deep(pre) {
                background: #282c34;
                padding: 1em;
                border-radius: 4px;
                overflow-x: auto;

                code {
                    background: none;
                    padding: 0;
                }
            }
        }
    }
}
</style>